<template>
    <template v-for="item in menuList" :key="item.id">
        <el-sub-menu
                v-if="item.menuDtos?.length"
                :index="item.pagePath"
        >
            <template #title>
                <el-icon>
                    <component :is="item.icon"/>
                </el-icon>
                <span>{{ item.name }}</span>
            </template>

            <!-- 关键修改：直接递归处理子项 -->
            <MenuItem :menu-list="item.menuDtos"/>
        </el-sub-menu>

        <el-menu-item
                v-else
                :index="item.pagePath"
        >
            <el-icon>
                <component :is="item.icon"/>
            </el-icon>
            <span>{{ item.name }}</span>
        </el-menu-item>
    </template>
</template>

<script setup>
    // 正确使用defineProps
    const props = defineProps({
        menuList: {
            type: Array,
            default: () => []
        }
    })

    // 单独定义组件名（需安装unplugin-vue-define-options）
    defineOptions({
        name: 'MenuItem'
    })

</script>
